import { Card, Statistic, Row, Col } from 'antd';
import { ShoppingCartOutlined } from '@ant-design/icons';

const OrderStatistics = () => {
  // 统计数据（实际项目中可从接口获取）
  const statsData = [
    {
      title: '今日订单总数',
      value: 32,
      growth: '+12%',
      icon: <ShoppingCartOutlined />,
      color: '#8B5A2B',
      growthColor: 'green',
    },
    {
      title: '今日订单总额',
      value: '¥15,840',
      growth: '+8%',
      icon: <ShoppingCartOutlined />,
      color: '#2F4F4F',
      growthColor: 'green',
    },
    {
      title: '待处理订单',
      value: 5,
      growth: '+2',
      icon: <ShoppingCartOutlined />,
      color: '#CD5C5C',
      growthColor: 'red',
    },
  ];

  return (
    <Row gutter={[16, 16]}>
      {statsData.map((item, index) => (
        <Col xs={24} key={index}>
          <Card  className="shadow-sm">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <p style={{ color: '#666', fontSize: '12px', marginBottom: 4 }}>{item.title}</p>
                <Statistic
                  value={item.value}
                  valueStyle={{ color: item.color, fontSize: '20px', fontWeight: 'bold' }}
                />
                <p 
                  style={{ 
                    fontSize: '12px', 
                    marginTop: 4,
                    color: item.growthColor === 'green' ? '#52c41a' : '#f5222d'
                  }}
                >
                  <i className={`fa fa-arrow-up mr-1`}></i> 较昨日增长 {item.growth}
                </p>
              </div>
              <div 
                style={{ 
                  backgroundColor: `${item.color}20`, 
                  padding: '10px', 
                  borderRadius: '8px',
                  color: item.color
                }}
              >
                {item.icon}
              </div>
            </div>
          </Card>
        </Col>
      ))}
    </Row>
  );
};

export default OrderStatistics;